<template>
<div v-if="query" class="notification-bg">
      <div  
      v-for="(item,index) in notificationArr" 
      :key="item.closeTime" 
      class="notification-item"
      :class="{'will-close':item.willClose, ['notification-item-'+_normalizeQuery(item.query)]: true}"
      >
          <span class="notification-icon">{{item.query}}</span>
          <i @click="disapper(index)" class="fa fa-times"></i>
       </div>
  </div>
  
</template>
<script>
    import Notice from './index'
    import moment from 'moment'

    const SUCCESS = '这是来自success的消息'
    const INFO = '这是来自Info的消息'
    const ERROR = '这是来自error的消息'
    const WARNING = '这是来自warning的消息'
    const ONLY_ONE_NOTICE = 1
    const DEFAULT_DURATION = 3

    export default{
        data() {
            return {
                notificationArr: [],
                willClose: false,
                timer: null
            }
        },
        props: {
            query: {
                type: String,
                default: ''
            }
        },
        // 实现props属性双向绑定的方式
        watch: {
            query(newQuery){
            // this.notificationArr.push (new Notice({
            //        query: this.query === SUCCESS?SUCCESS:this.query===INFO?INFO:this.query===ERROR?ERROR:WARNING,
            //        msg: this.query,
            //        willClose: this.willClose
            // }))
          }
        },
        methods: {
            add(param) {
                 this.notificationArr.push (new Notice({ 
                   closeTime : moment().add(DEFAULT_DURATION, 's').format('x'),
                   query: param === SUCCESS?SUCCESS:param ===INFO?INFO:param===ERROR?ERROR:WARNING,
                   msg: param,
                   willClose: this.willClose
            }))
             clearInterval(this.timer)
             this.refreshNotification();
              this.timer = setInterval(function() {
                this.refreshNotification()
            }.bind(this), 300)
            },
            refreshNotification(){
                this.notificationArr = this.notificationArr.map((item) => {
                    const milliseconds = moment().format('x') - item.closeTime
                    if (milliseconds > 0) {
                       item.willClose = true
                    }
                    if(milliseconds > 400 && item.willClose){
                        return null
                    }
                    return item
                }).filter(item => item)
            },
            _normalizeQuery (query) {
               if (query === SUCCESS) {
                   return 'success'
               }
               else if (query === INFO) {
                   return 'info'
               }
               else if (query === ERROR) {
                   return 'error'
               }
               else {
                   return 'warning'
               }
            },
            disapper(index) {
            //   this.notificationArr.splice(index,1)
              this.notificationArr[index].willClose = true
              
              // error code
            //   this.notificationArr.splice(this.notificationArr[index],1)

            //   // deleted element content  
            //   const indexTemp = e.srcElement.previousElementSibling.innerHTML ;

            //   // deleted element Array
            //   const indexArr = this.notificationArr.map((item) => {
            //       return item.query
            //   })
            //   const currentIndex = indexArr.findIndex(value => value === indexTemp);
            //       //   this.notificationArr[currentIndex].willClose = true
            //   this.notificationArr.splice(this.notificationArr.findIndex(index=>index===currentIndex),1)  
            }
        }
    }
</script>
<style lang="scss">

</style>

